<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>回顾Object.defineproperty方法</title>
  </head>

  <body>
    <script type="text/javascript">
      let number = 18;
      let person = {
        name: "张三",
        sex: "男",
      };
      // 实际上这个是vue中数据绑定的底层原理，给person增加age这个key 其取值伪18但是可以控制
      // Object.defineProperty(obj, prop, descriptor) 原型，obj要修改的属性的对象，prop要定义的属性名称，desc属性描述符
      Object.defineProperty(person, "age", {
        // value:18,  //配置项  相当于给这个object配置age=18，默认不可枚举
        // enumerable:true, //控制属性是否可以枚举，默认值是false
        // writable:true, //控制属性是否可以被修改，默认值是false
        // configurable:true //控制属性是否可以被删除，默认值是false

        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
          console.log("有人读取age属性了");
          return number;
        },

        //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(value) {
          console.log("有人修改了age属性，且值是", value);
          number = value;
        },
      });

      // console.log(Object.keys(person)) 对于直接设置的 person = {name: "张三",sex: "男",age:18}; 是可以遍历到age的 但是通过defineProperty定义的属性默认不可遍历

      console.log(person);

      // for (const key in object) {
      // 	console.log(person[key]);
      // }

      // delete person.age defineProperty默认不可删除
    </script>
  </body>
</html>
